<template>
  <div>
    <a-tree
      checkable
      @check="onCheck"
      :checkedKeys="checkedKeys"
      :treeData="treeData"
      @expand="onExpand"
      @select="onTreeNodeSelect"
      :selectedKeys="selectedKeys"
      :expandedKeys="expandedKeysss"
      :checkStrictly="checkStrictly"
    >
      <span slot="hasDatarule" slot-scope="{ slotTitle, ruleFlag }">
        {{ slotTitle }}<a-icon v-if="ruleFlag" type="align-left" style="margin-left: 5px; color: red"></a-icon>
      </span>
    </a-tree>
    <role-datarule-modal ref="datarule"></role-datarule-modal>
  </div>
</template>

<script>
import { queryTreeListForRole, queryRolePermission } from '@/api/api'
import RoleDataruleModal from './RoleDataruleModal.vue'
export default {
  name: 'PermissionList',
  components: {
    RoleDataruleModal,
  },
  props: {
    value: [String, Array],
  },
  data(){
    return {
      roleId:"",
      treeData: [],
      defaultCheckedKeys:[],
      checkedKeys:[],
      halfCheckedKeys:[],
      selectedKeys: [],
      expandedKeysss:[],
      checkStrictly: false, //不关联
      isChildren : new Map()
    }
  },
  methods: {
    onCheck (o,halfKeys) {
      if(this.checkStrictly){
        this.checkedKeys = o.checked;
      }else{
        this.checkedKeys = o
      }
      this.halfCheckedKeys = halfKeys.halfCheckedKeys;
      this.$emit('change', this.checkedKeys);
    },
    onExpand(expandedKeys){
      this.expandedKeysss = expandedKeys;
    },
    handleSubmit() {
      return {
        permissionIds: this.halfCheckedKeys.concat(this.checkedKeys).join(","),
        lastpermissionIds: this.defaultCheckedKeys.join(","),
      };
    },
    loadData(roleId) {
      this.checkedKeys = [];
      this.defaultCheckedKeys = [];
      this.expandedKeysss = []
      queryTreeListForRole().then((res) => {
        if (res.success) {
          this.treeData = res.result && res.result.treeList
          this.roleId = roleId;     
          if (!roleId) return;
          this.loadCheckChildren(res.result.treeList);
          queryRolePermission({ roleId }).then((res_) => {
            if (res_.success) {
              this.defaultCheckedKeys = [...res_.result];
              res_.result.forEach((item) => {
                if (this.isChildren.has(item)) {
                  this.checkedKeys.push(item);
                } else {
                  if (this.halfCheckedKeys.indexOf(item) === -1) {
                    this.halfCheckedKeys.push(item);
                  }
                }
              })

              this.$emit('change', this.checkedKeys);
            } else {
              this.$message.warning(res_.message);
            }
          })
        } else {
          this.$message.warning(res.message);
        }
      })
    },
    loadCheckChildren(res) {
      res.forEach((item) => {
        if (item.children && item.children.length > 0) {
          this.loadCheckChildren(item.children);
        } else {
          this.isChildren.set(item.key, 1);
        }
      })
    },
    onTreeNodeSelect(id) {
      if (id && id.length > 0) {
        this.selectedKeys = id
      }
      this.$refs.datarule.show(this.selectedKeys[0], this.roleId)
    },
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>

<style lang="less" scoped>
</style>